<style>
  .box {
    width: 150px;
    height: 150px;
    border: 2px solid red;
    float: left;
    /*margin: 100px 30px;*/
    /* 设置视距为300px */
    perspective: 100px;
    /* 设置视距为900px */
    /* perspective:900px; */
  }
  .item {
    width: 100%;
    height: 100%;
    background-color: rgb(240, 230, 140, 0.7);
  }
  .item1 {
    transform: translateZ(-80px);
  }
  .item2 {
    transform: translateZ(80px);
  }
  .item3 {
    transform: translateZ(-100px);
  }
</style>
<body>
<div class="box">
  <div class="item item1">translateZ(100px)</div>
</div>
<div class="box">
  <div class="item item2">translateZ(-100px)</div>
</div>
<div class="box">
  <div class="item item3">translateZ(0px)</div>
</div>
</body>